<!--
/** 软件大屏播放工具部件
 * Author:      huoxj 
 * CreateTime:  2023/2/5 21:41:07 
 * LastEditor:  huoxj 
 * ModifyTime:  2023/12/5 19:34:57 
 * Description: 
*/ 
-->
<template>
  <div class="flex-in-line" style="height: 100%; width: 100%">
    <a-tooltip title="往前">
      <a-button style="margin-left: 8px" type="primary" width="40px" shape="circle" :icon="h(DoubleLeftOutlined)" @click="doPrePage" />
    </a-tooltip>
    <a-tooltip :title="timerStart ? '暂停' : '开始'">
      <a-button
        style="margin-right: 12px"
        type="primary"
        width="40px"
        shape="circle"
        :icon="timerStart ? h(PauseOutlined) : h(CaretRightOutlined)"
        @click="switchTimer"
      />
    </a-tooltip>
    <a-slider
      style="height: 50px; flex: 1"
      v-model:value="active"
      :marks="curPageObj"
      dots
      :min="0"
      :max="Object.keys(curPageObj).length - 1"
      :included="false"
      :tooltipVisible="false"
      :tipFormatter="setTip"
    />
    <a-tooltip :title="timerStart ? '暂停' : '开始'">
      <a-button
        style="margin-left: 12px"
        type="primary"
        width="40px"
        shape="circle"
        :icon="timerStart ? h(PauseOutlined) : h(CaretRightOutlined)"
        @click="switchTimer"
      />
    </a-tooltip>
    <a-tooltip title="往后">
      <a-button style="margin-right: 8px" type="primary" width="40px" shape="circle" :icon="h(DoubleRightOutlined)" @click="doNextPage" />
    </a-tooltip>
  </div>
</template>
<script setup lang="ts">
  import { ref, Ref, reactive, watchEffect, h, onMounted } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { message } from 'ant-design-vue';
  import { DoubleRightOutlined, DoubleLeftOutlined, CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
  const emit = defineEmits(['onChange']);

  const props = defineProps({
    width: propTypes.string,
    height: propTypes.string,
    dataList: propTypes.object.def([]),
  });

  const active = ref<number>(0);
  const curPageNum = ref(0);
  const curPageObj = ref(props.dataList.length==0? {} : props.dataList[curPageNum.value]);
  const timerStart = ref(false);

  watchEffect(() => {
    curPageObj.value = props.dataList.length==0? {} : props.dataList[curPageNum.value]
    emit('onChange', curPageObj.value[active.value]);
  });

  function setTip(v) {
    // return "<img src='https://img.zcool.cn/community/01a7b358d0b3e6a801219c7788fd1f.gif'>";
    return v + 'tip';
  }

  let timerId;
  onMounted(() => {
    startTimer();
  });

/* 开始时间
 * Author:      yangjq 
 * CreateTime:  2023/12/5 19:39:27 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 19:39:27 
 * Description: 
*/ 
  function startTimer() {
    stopTimer();
    timerId = setInterval(() => {
      if (props === null || props.dataList === null || props.dataList.length === 0) {
        return;
      }
      if (Object.keys(curPageObj.value).length <= 0) {
        return;
      }

      // if (active.value === Object.keys(curPageObj.value).length - 1 && curPageNum.value === props.dataList.length - 1) {
      //   curPageNum.value = 0;
      //   curPageObj.value = props.dataList[curPageNum.value];
      //   active.value = 0;
      //   startTimer();
      //   return;
      // }

      if (active.value === Object.keys(curPageObj.value).length - 1) {
        console.log('doNextPage');
        doNextPage();
        return;
      }

      active.value = (active.value + 1) % Object.keys(curPageObj.value).length;
      // console.log(active.value);
      // console.log(Object.keys(curPageObj.value).length);
    }, 1000 * 60);
    timerStart.value = true;
  }
  function stopTimer() {
    clearInterval(timerId);
    timerStart.value = false;
  }

/* 时间开关
 * Author:      yangjq 
 * CreateTime:  2023/12/5 19:38:06 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 19:38:06 
 * Description: 
*/ 
  function switchTimer() {
    if (timerStart.value) {
      stopTimer();
    } else {
      startTimer();
    }
  }

/* 后翻页
 * Author:      yangjq 
 * CreateTime:  2023/12/5 19:37:17 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 19:37:17 
 * Description: 
*/ 
  function doNextPage() {
    active.value = 0;

    if (curPageNum.value < props.dataList.length - 1) {
      curPageNum.value++;
      // startTimer();
    } else {
      // message.info('暂无下一页');
      curPageNum.value = 0;
    }
    curPageObj.value = props.dataList[curPageNum.value];
  }


/* 前翻页
 * Author:      yangjq 
 * CreateTime:  2023/12/5 19:36:56 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 19:36:56 
 * Description: 
*/ 
  function doPrePage() {
    if (curPageNum.value > 0) {
      curPageNum.value--;
      curPageObj.value = props.dataList[curPageNum.value];

      active.value = 0;
      startTimer();
    } else {
      message.info('暂无上一页');
    }
  }
</script>
<style lang="less" scoped>
  .flex-in-line {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
  }

  .ant-slider {
    width: 86%;
    height: 30px;
    color: green;
  }
  .ant-slider-with-marks {
    margin: 0 8px;
  }

  :deep(.ant-slider-handle) {
    background-color: rgb(73, 146, 225);
  }
</style>
